☰

підключення Vue.js

Найпростіше підключення фрейморка до веб-сторінки за допомогою тега script. Сам файл фреймворка vue.js можна вказувати як з власного сервера так із офіційного сайту. Для NPM використовуйте модуль Vue CLI.

CDN

Для підключення останньої версії необхідно розмістити на веб-сторнці наступний код:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Рекомендовано для готових проектів підключати вказану версію Vue.js, так як при виходу нових версій фреймворка можуть бути суттєві відмінності.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

NPM

Для більш великих проектів при робіті з однофайловими компонентами необхідно Node.JS, пакетний менеджер npm, та встановити модуль npm Vue CLI.

Щоб встановити модуль Vue CLI пишемо наступну команду у терміналі.

Зверніть увагу! В залежності від прав користувача в ОС, можливо деякі команди необхідно буде виконати від імені адміністратора.

npm install -g @vue/cli
Після встановлення Vue CLI подальші команди для створення проекту Vue.JS залежить від версії Vue CLI. Адже між v3 і v2.x команди різняться. Для того щоб взнати яка версія Vue CLI необхідно ввести команду: npm list --depth=0 Та у списку знайти версію vue.

Після встановлення переходимо в каталог проект в терміналі (за допомогою команди cd або відкриваємо термінал у каталозі), для того щоб подальші команди виконувати для каталога проекту.

Vue CLI v2.x

Для Vue CLI v2.x у терміналі вводимо команду: vue init webpack

Якщо необхідно самий мінімальний пакет використовуйте команду:"vue init webpack-simple".

Після вводу команди необхідно буде в терміналі відповісти на питання: назва проекту, ім'я автора і т.д.

Vue CLI v3

Для Vue CLI v3 у терміналі вводимо команду:

vue create назва_проекта

Також у Vue CLI v3 є можливість створювати проект за допомогою інтерфейсу UI. Для цього введіть в терміналі команду:

vue ui
Після виконаних операцій буде створено в каталозі файли проекту.
    Основні файли і каталоги:
  • src - каталог який містить файли проекту.
  • src/main.js - головний файл скрипту Vue.js.
  • src/App.vue - однофайловий компонент Vue.js.
  • index.html - індексний (головний) файл HTML.
  • package.json - файл формату JSON який містить параметри проекту: назву проекту, версію, опис, автора, назви і версії необхідних модулів для проекту і т.д..

Для установки модулів які описані у файлі package.json необхідно виконати команду:

npm install

Запуск локального сервера

Після того як пакетний менеджер npm завантажить необхідні модулі для проекту можна виконати запуск локального сервера щоб відкрити проект в браузері.

Для запуску локального сервера для проекту виконуємо команду у терміналі:

npm run dev

Запускається локальний сервер, адреса якого буде показана у терміналі. Зазвичай http://localhost:8080.